<link rel="stylesheet" href="ccay/example/demo.css"  type="text/css" />
<script type="text/javascript" src="ccay/example/demo.js" charset="utf-8"></script>
<script type="text/javascript" src="ccay/example/ui/validate/validate.js" charset="utf-8"></script>
<style>
label.error{
line-height:22px;
}
</style>
<div id="validateDemo">
    <div title='API' tabid='tab1'>
	    <div>
	    <h2>1.在html页面的input标签引入class为如下类型，进行相应的数据校验</h2>
	        <div style='padding-left:30px'>
	    	<form class="init ccay-form">
					<div class="ccay-form-body ccay-form-custom">						
							<ul>
										<li class="ccay-form-row">
									        <samp><h3>参数</h3></samp>
											<span class="ccay-form-input">
												<h3>描述</h3>
											</span>
										</li>
										  <li class="ccay-form-row">
										 	<samp class="i18n" i18nKey="dateCompare"></samp>
										 	<span class='ccay-form-input'>日期的比较的校验,还必须引入compareTo=“#第一个日期组件的id”</span>
										 </li>
										 <li class="ccay-form-row">
										 	<samp class="i18n" i18nKey="date"></samp>
										 	<span class='ccay-form-input'>日期类型date的校验，如2012/8/27</span>
										 </li>
										 <li class="ccay-form-row ">
										 	<samp class="i18n" i18nKey="datetime"></samp>
										 	<span class='ccay-form-input'>日期类型datetime的校验,如如2012/8/27 14:00:00</span>
										 </li>
										 <li class="ccay-form-row">
										 	<samp class="i18n" i18nKey="speczh"></samp>
										 	<span class='ccay-form-input'>无特殊字符，但可包含中文</span>										 	
										 </li>
										 <li class="ccay-form-row">
										 	<samp class="i18n" i18nKey="specialch"></samp>
										 	<span class='ccay-form-input'>只能包含[a-zA-Z0-9_.-]中的字符</span>
										 </li>
										 <li class="ccay-form-row">
										 	<samp class="i18n" i18nKey="specialch2"></samp>
										 	<span class='ccay-form-input'>只能包含[a-zA-Z0-9_-]中的字符，无小数点</span>
										 </li>
										 <li class="ccay-form-row">
										 	<samp class="i18n" i18nKey="required"></samp>
										 	<span class='ccay-form-input'>该项为必填</span>
										 </li>	
										 <li class="ccay-form-row">
										 	<samp class="i18n" i18nKey="email"></samp>
										 	<span class='ccay-form-input'>email类型的数据校验</span>
										 </li>
										 <li class="ccay-form-row">
										 	<samp class="i18n" i18nKey="url"></samp>
										 	<span class='ccay-form-input'>url类型的数据校验</span>
										 </li>
										 <li class="ccay-form-row">
										 	<samp class="i18n" i18nKey="number"></samp>
										 	<span class='ccay-form-input'>数字类型的数据校验，可指定最大值max和最小值min,如：max="100",最大值为100</span>
										 </li>										 										 
										 <li class="ccay-form-row">
										 	<samp class="i18n" i18nKey="digits"></samp>
										 	<span class='ccay-form-input'>非小数数字类型的数据校验</span>
										 </li>
										 <li class="ccay-form-row">
										 	<samp class="i18n" i18nKey="creditcard"></samp>
										 	<span class='ccay-form-input'>非小数数字，空格，上划线的数据校验</span>
										 </li>
										 <li class="ccay-form-row">
										 	<samp class="i18n" i18nKey="另补充：字符串长度校验"></samp>
										 	<span class='ccay-form-input'>此校验不在class中设置，只需设置最长长度maxlength和最短长度minlength，如maxlength="200"</span>
										 </li>														 										 
															
				    </ul>
			   </div>
		    </form>
		    </div>
		    <h2>2.自定义添加校验</h2>
		    <div style='padding-left:30px'>
	    	<h3>2.1  $.validator.addMethod(className,function(value) { …},text)</h3>
	    	作用：添加一个新的验证方法<br>
	    	使用场景：如果当前已定义的校验不能满足你的要求，可自己添加校验，只要在js初始化时将方法添加进去，将className名称在html中需要校验控件的class中指定即可
	    	<form id="param1" class="init ccay-form">
					<div class="ccay-form-body ccay-form-custom">
						<ul>
						
						    <li class="ccay-form-row">
						        <samp><h3>参数</h3></samp>
								<span class="ccay-form-input">
									<h3>描述</h3>
								</span>
							</li>
							<li class="ccay-form-row">
						        <samp>className</samp>
								<span class="ccay-form-input">
									class名称
								</span>
							</li>	
							<li class="ccay-form-row">
						        <samp>function(value){ …}</samp>
								<span class="ccay-form-input">
									验证方法，实际验证逻辑(参数值value 是当前控件输入值),验证不通过请返回false，验证通过返回true
								</span>
							</li>
							<li class="ccay-form-row">
						        <samp>text</samp>
								<span class="ccay-form-input">
									验证失败后的提示信息，推荐该处使用使用国际化的信息，比如 $i18n("key")
								</span>
							</li>	
							
				    </ul>
			   </div>
		    </form>
	    	</br>
	    	<h3>2.2  $.validator.addClassRules(className,{ required:true, email: true,.....})</h3>
	    	作用：增加组合验证类型,将同时具有几种方式验证（类似class='required  email'）
	    	<form id="param2" class="init ccay-form">
					<div class="ccay-form-body ccay-form-custom">
						<ul>
						
						    <li class="ccay-form-row">
						        <samp><h3>参数</h3></samp>
								<span class="ccay-form-input">
									<h3>描述</h3>
								</span>
							</li>
							<li class="ccay-form-row">
						        <samp>className</samp>
								<span class="ccay-form-input">
									方法名称
								</span>
							</li>	
							<li class="ccay-form-row">
						        <samp>{ required:true, email: true,.....}</samp>
								<span class="ccay-form-input">
									校验组合, 可将多种校验组合在一起，可直接设置已定义的className
								</span>
							</li>
				    </ul>
			   </div>
		    </form>
		    </div>
		    </br>
		    <h2>3.$.fn.ccayValidate()</h2>
		    <div style='padding-left:30px'>
	    	作用：进行验证的初始化,如：$S('#testForm').ccayValidate();<br>
	    	使用场景：在没有初始化相关验证器时，可以调用此函数进行初始化
	    	</div>
	    	<h2>4.$.fn.valid()</h2>
	    	<div style='padding-left:30px'>
	    	作用：在需要验证的地方执行验证,判断返回值。如：if(!$S('#testForm').valid()){return}
	    	使用场景：在控件中指定了相关验证，数据提交时没有进行验证的情况下，可以提交数据前添加此函数
	    	</div>
	    </div>
	     
    </div>
    <div title='Demo' tabid='tab2'>
	    <form id="demo1" class="init ccay-form">
		    	<h4><span>实例1：指定input为必填项</span></h4>
		    	<div id="openTry"  style='padding-left:30px'>
			    		<ul >
			    			<li  class="ccay-form-input">
						   		<input type="text" id="mname" name="mname" class="required"/>
						   		<span class="ccay-button" onclick="Ccay.example.ui.validate.validate('#mname')">
				 					<a class="ccay-icon confirm"></a>
				 					<label class="i18n" i18nKey="validate"></label>
				 				</span>
			    			</li>
			    		</ul>
				    <div>
						<span><br>指定input为必填项，设置class="required"</span>
					</div>
					<div class='codeArea'>
						<pre id='html1'>&lt;input type="text" id="mnameTest" name="mname" class="required"/></pre>
					</div>
					<div class='try'>
						<a onclick="Ccay.example.openTry('#validateDemo','',$('#html1').html())">亲自试一试</a>
					</div>
			    </div>
		  </form>
		<form id="demo2" class="init ccay-form">
		    	<h4><span>实例2：验证后一个时间不小于前一个时间</span></h4>
		    	<div  style='padding-left:30px'>
		    		<ul >
		    			<li  class="ccay-form-input">
					   		<input type="text" id="startDate2" name="startDate2" class="init ccay-calendar date required" format="date"/>
			 				<input type="text" id="endDate2" name="endDate2" class="init ccay-calendar date dateCompare required" compareTo="#startDate2"/>
			 				<span class="ccay-button" onclick="Ccay.example.ui.validate.validate('#demo2')">
			 					<a class="ccay-icon confirm"></a>
			 					<label class="i18n" i18nKey="validate"></label>
			 				</span>
		    			</li>
		    		</ul>
		    	
				    <div>
						<span><br>设置class="init ccay-calendar date dateCompare required" compareTo="#startDateId" compareTo值为另一个输入框Id</span>
					</div>
					<div class='codeArea'>
						<pre id='html2'>
&lt;input type="text" id="startDateTest" name="startDate" class="init ccay-calendar date required" format="date"/>
&lt;input type="text" id="endDate" name="endDate"
		class="init ccay-calendar date dateCompare required" compareTo="#startDateTest"/></pre>
					</div>
					<div class='try'>
						<a onclick="Ccay.example.openTry('#validateDemo','',$('#html2').html())">亲自试一试</a>
					</div>
			   </div>
		  </form>
		  <form id="demo3" class="init ccay-form">
		    	<h4><span>实例3：组合验证：长度限制+结尾限制</span></h4>
		    	<div  style='padding-left:30px'>
		    		<ul >
		    			<li  class="ccay-form-input">
					   		<input type="text" id="mname" name="mname" class="required" minlength="10" maxlength=30"  accept="sam"/>
					   		<span class="ccay-button" onclick="Ccay.example.ui.validate.validate('#demo3')">
			 					<a class="ccay-icon confirm"></a>
			 					<label class="i18n" i18nKey="validate"></label>
			 				</span>
		    			</li>
		    		</ul>
		    	
				    <div>
						<span><br>说明：验证必填项（class="required"），输入长度为10<=x<=30（minlength="10" maxlength="30"）且必须以'.sam'字符串后缀（accept="sam"）。</span>
					</div>
					<div class='codeArea'>
						<pre id='html3'>&lt;input type="text" id="mnameTest1" name="mname" class="required" minlength="2" maxlength="5" accept="sam"/></pre>
					</div>
					<div class='try'v>
						<a onclick="Ccay.example.openTry('#validateDemo','',$('#html3').html())">亲自试一试</a>
					</div>
				</div>	
			</form>
	     <form id="demo4" class="init ccay-form">
	    	<h4><span>实例4：指定采用自定义的验证方法(customFun)验证input输入值</span></h4>
	    	<div  style='padding-left:30px'>
	    		<ul >
	    			<li  class="ccay-form-input">
	    			
	    			<input type="text" id="nickname" name="nickname" class="required customFun"/>
					<span class="ccay-button" onclick="Ccay.example.ui.validate.validate('#demo4')">
	 					<a class="ccay-icon confirm"></a>
	 					<label class="i18n" i18nKey="validate"></label>
	 				</span>
	    			</li>
	    		</ul>
	    	
			    <div>
					<span><br>指定采用自定义的验证方法，需要在class中指定一个名称;如(customFun) </span>
				</div>
				<h3>html Code</h3>
				<div class='codeArea'>
					<pre id='html4'>&lt;input type="text" id="nicknameTest" name="nickname" class="required customFun"/></pre>
				</div>
				<h3>js Code</h3>
				<div class='codeArea'>
					<pre id='html5'>
 $.validator.addMethod(
     "customFun", /*指定名称*/
     function(value){if(/^\d+$/.test(value)) /*判断输入是否为数字*/
          {return true} return false}, /*如果是则返回true表示验证通过,不是返回false表示验证不通过*/
     $i18n("ccay.common.validate.numeric")); /*设置当验证不通过时,出现的提示信息*/</pre>
				</div>
				<div class='try'>
					<a onclick="Ccay.example.openTry('#validateDemo',$('#html5').html(),$('#html4').html())">亲自试一试</a>
				</div>
			</div>	
		</form>	
		 <form id="demo5" class="init ccay-form">
	    	<h4><span>实例5：使用自定义的组合验证类型</span></h4>
	    	<div  style='padding-left:30px'>
	    		<ul >
	    			<li  class="ccay-form-input">
	    			<input type="text" id="homeAddress" class="YourClassName" name="homeAddress"/>
					<span class="ccay-button" onclick="Ccay.example.ui.validate.validate('#demo5')">
	 					<a class="ccay-icon confirm"></a>
	 					<label class="i18n" i18nKey="validate"></label>
	 				</span>
		    			</li>
		    		</ul>
		    	
			    <div>
					<span><br>使用自定义的组合验证类型，需要在class中指定一个名称;如(YourClassName) </span>
				</div>
				<h3>html Code</h3>
				<div class='codeArea'>
					<pre id='html6'>&lt;input type="text" id="homeAddressTest" class="YourClassName" name="homeAddress"/></pre>
				</div>
				<h3>js Code</h3>
				<div class='codeArea'>
					<pre id='html7'>
  $.validator.addClassRules(
      "YourClassName", /*指定名称*/
      {maxlength:10, customFun: true}) /*添加组合验证类型,maxlength为最大长度10，customFun为必须输入数字格式*/
</pre>
				</div>
				<div class='try'>
					<a onclick="Ccay.example.openTry('#validateDemo',$('#html7').html(),$('#html6').html())">亲自试一试</a>
			    </div>
			</div>
		</form>	
		
		
		<form name="demo6" id="demo6" class="init ccay-form">
	    	<h4><span>实例6：手动校验</span></h4>
	    	<div  style='padding-left:30px'>
	    	    <span>说明：进行手动验证某个输入控件的值是否通过校验，form提交也可用。$S("#id").valid()。</span>
	    	    <div class="demo">
		    		<ul >
		    			<li  class="ccay-form-input">
		    				<input type="text" id="homeAddress1"  class="required speczh" name="homeAddress1"/>
							<span class="ccay-button" onclick="Ccay.example.ui.validate.valida()">
			 					<a class="ccay-icon confirm"></a>
			 					<label class="i18n" i18nKey="validate"></label>
			 				</span>
		    			</li>
		    		</ul>
	    		</div>
	    		<h3>html Code</h3>
				<div class='codeArea'>
					<pre id='html61'>
&lt;input type="text" id="homeAddressTest"  class="required speczh" name="homeAddress"/>
</pre>
				</div>
				<h3>js Code</h3>
				<div class='codeArea'>
					<pre id='js61'>//手动校验示例
page.validaDemo = function(){
/*验证不能为空，不能输入以下特殊字符“&lt; > ? ! @ # $ %/ \”。*/
	$S(form).valid();
}</pre>
				</div>
				<div class='try'>
					<a onclick="Ccay.example.openTry('#validateDemo',$('#js61').html(),$('#html61').html())">亲自试一试</a>
			    </div>
	    	</div>
	    </form>
	    <form id="demo7" class="init ccay-form">
		    	<h4><span>实例7：验证日期选择是否不符合跨月数限制 </span></h4>
		    	<div  style='padding-left:30px'>
		    		<ul >
		    			<li  class="ccay-form-input">
					   		<input type="text" id="startDate" name="startDate" class="init ccay-calendar date required" format="date"/>
			 				<input type="text" id="endDate2" name="endDate2" class="init required ccay-calendar date dateCompare max-gap" maxGap="3" format="date" compareTo="#startDate"/>
			 				<span class="ccay-button" onclick="Ccay.example.ui.validate.validate('#demo7')">
			 					<a class="ccay-icon confirm"></a>
			 					<label class="i18n" i18nKey="validate"></label>
			 				</span>
		    			</li>
		    		</ul>
		    	    <div>
						<span><br>说明：设置maxGap="3"， 表示前后两个时间差最大不能超过3个月</span>
					</div>
					<div class='codeArea'>
						<pre id='html71'>
&lt;input type="text" id="startDateTest2" name="startDate" class="init ccay-calendar date required" format="date"/>
&lt;input type="text" id="endDate2" name="endDate"
		class="init required ccay-calendar date dateCompare max-gap" maxGap="3" format="date" compareTo="#startDateTest2"/></pre>
					</div>
					<div class='try'>
						<a onclick="Ccay.example.openTry('#validateDemo','',$('#html71').html())">亲自试一试</a>
					</div>
			   </div>
		  </form>
    </div>
    <div title="试一试" tabid="trytab" >
	    <fieldset class='ccay-demo'>
	    <legend ><h2>代码区</h2></legend>
		   
		   <span>请在下面的文本框中编辑您的代码，然后单击此按钮测试结果  ————></span><input value="try it yourself" type="button" onclick="Ccay.example.ui.validate.runDemo()" /> 

				<div>
				    <table  style="width:100%;">
				      <tr>
				        <td style="width:100%;">
						<h3>js Code:</h3>	
						  <!-- 高度按需来调整。默认最小应为100px -->					
	                      <textarea id="jsTxt" style="height:100px;width:99%;"></textarea>
	                    </td>   
	                  </tr>
	                  <tr>
	                    <td style="width:100%;">
						<h3>html Code:</h3>
						  <!-- 高度按需来调整。默认最小应为100px -->
	                      <textarea id="htmlTxt" style="height:100px;width:99%;"></textarea>
	                    </td>
	                  </tr> 
                    </table>
				</div>
           </fieldset>
        <fieldset class='ccay-demo'>
          <legend ><h2>结果区</h2></legend>
			<div>
			     <div style="overflow:auto;" id="demoMainPanel"></div>
			</div>
        </fieldset>
     </div>
     <div title="FAQ">
		  <form class="init ccay-form">
		 <div class="ccay-form-body ccay-form-custom">
		    <ul>                     
		        <li class="ccay-form-row">
		            <samp><h3>问题</h3></samp>
		           <span class="ccay-form-input">
		               <h3>解决方案</h3>
		           </span>
		        </li>
		        <!-- 若问题和内容较多，可在li中的class加上ccay-form-whole 
		        <li class="ccay-form-row">
		                          <samp class="i18n" i18nKey=""></samp>                          
		                         <span class="ccay-form-input"></span>
		        </li>  -->
		    </ul>
		</div>
		  </form>                    
    </div>  

</div>	 


